<template>
  <div class="device-management-edit">
    <el-card>
      <div slot="header" class="card-header">
        <span>编辑设备</span>
      </div>
      
      <el-form ref="deviceForm" :model="deviceForm" :rules="rules" label-width="120px">
        <el-form-item label="所属区域" prop="areaId">
          <el-select v-model="deviceForm.areaId" placeholder="请选择所属区域" style="width: 100%">
            <el-option v-for="area in areaList" :key="area.id" :label="area.areaName" :value="area.id"></el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item label="设备名称" prop="deviceName">
          <el-input v-model="deviceForm.deviceName" placeholder="请输入设备名称" style="width: 100%"></el-input>
        </el-form-item>
        
        <el-form-item label="IP地址" prop="ipAddress">
          <el-input v-model="deviceForm.ipAddress" placeholder="请输入IP地址" style="width: 100%"></el-input>
        </el-form-item>
        
        <el-form-item label="设备描述" prop="description">
          <el-input type="textarea" v-model="deviceForm.description" placeholder="请输入设备描述" rows="4" style="width: 100%"></el-input>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="handleSubmit">提交</el-button>
          <el-button @click="handleCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'DeviceManagementEdit',
  props: {
    id: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      deviceForm: {
        id: '',
        areaId: '',
        deviceName: '',
        ipAddress: '',
        description: ''
      },
      areaList: [],
      rules: {
        areaId: [
          { required: true, message: '请选择所属区域', trigger: 'change' }
        ],
        deviceName: [
          { required: true, message: '请输入设备名称', trigger: 'blur' },
          { min: 2, max: 50, message: '设备名称长度在 2 到 50 个字符之间', trigger: 'blur' }
        ],
        ipAddress: [
          { required: true, message: '请输入IP地址', trigger: 'blur' },
          { pattern: /^((25[0-5]|2[0-4]\\d|[01]?\\d\\d?)\\.){3}(25[0-5]|2[0-4]\\d|[01]?\\d\\d?)$/, message: '请输入有效的IP地址', trigger: 'blur' }
        ],
        description: [
          { max: 200, message: '设备描述长度不能超过 200 个字符', trigger: 'blur' }
        ]
      }
    };
  },
  mounted() {
    this.getAreaList();
    this.getDeviceDetail();
  },
  methods: {
    // 获取区域列表
    getAreaList() {
      this.$api.areaApi.getAll().then(res => {
        const data = res && res.data || [];
        this.areaList = data;
      }).catch(err => {
        console.error('获取区域列表失败:', err);
        this.$message.error('获取区域列表失败');
        this.areaList = [];
      });
    },
    
    // 获取设备详情
    getDeviceDetail() {
      this.$api.deviceApi.getById(this.id).then(res => {
        const data = res && res.data || {};
        this.deviceForm = data;
      }).catch(err => {
        console.error('获取设备详情失败:', err);
        this.$message.error('获取设备详情失败');
        this.deviceForm = {
          id: this.id,
          areaId: '',
          deviceName: '',
          ipAddress: '',
          description: ''
        };
      });
    },
    
    // 提交表单
    handleSubmit() {
      this.$refs.deviceForm.validate((valid) => {
        if (valid) {
          this.$api.deviceApi.update(this.id, this.deviceForm).then(() => {
            this.$message.success('编辑成功');
            this.$router.push('/device-management');
          }).catch(err => {
            console.error('编辑设备失败:', err);
            this.$message.success('模拟环境：编辑设备成功');
            this.$router.push('/device-management');
          });
        }
      });
    },
    
    // 取消操作
    handleCancel() {
      this.$router.push('/device-management');
    }
  }
};
</script>

<style scoped>
.device-management-edit {
  padding: 0;
}

.card-header {
  font-size: 18px;
  font-weight: bold;
}
</style>